<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			td,
			th {
				width: 200px;
				height: 30px;
				box-sizing: border-box;
			}

			td {
				padding-left: 20px;
			}

			.leaf {
				display: none;
			}

			.t1>td {
				padding-left: 35px !important;
			}

			.t2>td {
				padding-left: 50px !important;
			}

			.t3>td {
				padding-left: 65px !important;
			}

			.t4>td {
				padding-left: 80px !important;
			}

			.leaf td {
				padding-left: 20px;
			}

			.branch {
				/* background: cyan; */
			}

			tr>th:first-child,
			tr>td:first-child {
				width: 300px;
			}

			table,
			table tr th,
			table tr td {
				border: 1px solid #ccc;
				cursor: pointer;
			}

			table {
				border-collapse: collapse;
			}

			i {
				width: 16px;
				height: 14px;
				display: inline-block;
				background: url(img/leftJia.png) no-repeat;
				margin-left: 5px;
			}

			.boxs {
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<table class="boxs">
			<tr>
				<th>职能分配</th>
				<th>需资源分配人数</th>
				<th>理论工作量（人天）</th>
				<th>实际累计工作量（人天）</th>
			</tr>
		</table>
	</body>
	<script src="./js/jquery.min.js"></script>

	<script>
		$(function() {


			$.ajax({
				type: "GET",
				url: "./mock/data.json",
				async: false,
				success: function(res) {
					res.rows.forEach((item1, index1) => {
						let h1 =
							`<tr data-tt-id='${index1}'class="branch" id="1"><td>${item1.name}<i></i></td> <td></td> <td></td> <td></td> </tr>`;
						$(".boxs").append(h1);
						if (item1.subTbTeamsList) {
							item1.subTbTeamsList.forEach((item2, index2) => {
								let h2 =
									`<tr data-tt-id='${index1}-${index2}' dataparent='${index1}' class="leaf t1" id="1"><td>${item2.name}<i></i></td><td></td><td></td><td></td></tr>`;
								$(".boxs").append(h2);
								if (item2.subTbTeamsList) {
									item2.subTbTeamsList.forEach((item3, index3) => {
										let h3 =
											`<tr data-tt-id='${index1}-${index2}-${index3}' dataparent='${index1}-${index2}' id="1" class="leaf t2"><td>${item3.name}<i></i></td><td></td><td></td><td></td></tr>`;
										$(".boxs").append(h3);
										if (item3.subTbTeamsList) {
											item3.subTbTeamsList.forEach((item4, index4) => {
												let h4 =
													`<tr data-tt-id='${index1}-${index2}-${index3}-${index4}' id="1" dataparent='${index1}-${index2}-${index3}'class="leaf t3"><td>${item4.name}<i></i></td><td></td><td></td><td></td></tr>`;
												$(".boxs").append(h4);
												if (item4.subTbTeamsList) {
													item4.subTbTeamsList.forEach((item5, index5) => {
														let h5 =
															`<tr data-tt-id='${index1}-${index2}-${index3}-${index4}-${index5}' id="1" dataparent='${index1}-${index2}-${index3}-${index4}'class="leaf t4"><td>${item5.name}<i></i></td><td></td><td></td><td></td></tr>`;
														$(".boxs").append(h5);
													})
												}
												if (item4.tbmList) {
													item4.tbmList.forEach((item5, index5) => {
														let h5 =
															`<tr data-tt-id='${index1}-${index2}-${index3}-${index4}-${index5}' id="1" dataparent='${index1}-${index2}-${index3}-${index4}'class="leaf t4"><td>${item5.name}</td><td></td><td></td><td></td></tr>`;
														$(".boxs").append(h5);
													})
												}
											})
										}
										if (item3.tbmList) {
											item3.tbmList.forEach((item4, index4) => {
												let h4 =
													`<tr data-tt-id='${index1}-${index2}-${index3}-${index4}' dataparent='${index1}-${index2}-${index3}'class="leaf t3"><td>${item4.name}</td><td></td><td></td><td></td></tr>`;
												$(".boxs").append(h4);
											})
										}
									})
								}
								if (item2.tbmList) {
									item2.tbmList.forEach((item3, index3) => {
										let h3 =
											`<tr data-tt-id='${index1}-${index2}-${index2}' dataparent='${index1}-${index2}'class="leaf t2"><td>${item3.name}</td><td></td><td></td><td></td></tr>`;
										$(".boxs").append(h3);
									})
								}
							})
						}
						if (item1.tbmList) {
							item1.tbmList.forEach((item2, index2) => {
								let h2 =
									`<tr data-tt-id='${index1}-${index2}' dataparent='${index1}'class="leaf t1"><td>${item2.name}</td><td></td><td></td><td></td></tr>`;
								$(".boxs").append(h2);
							})
						}
					})
				},
				error: function(err) {
					console.log(err);
				}
			})

			$("tr").click(function() {
				let ht = $(this).attr("data-tt-id");
				<!-- $("[dataparent='"+ht+"']").toggle(); -->
				let h = $(this).attr("id");
				$(this).attr('id', parseInt(h) + 1);
				if (h % 2 == 1) {
					$("[dataparent='" + ht + "']").show();
					$(this).children().eq(0).children('i').css({
						'background-image': "url(img/leftJian.png)"
					});
					$(this).attr('id', parseInt(h) + 1);
				} else if (h % 2 == 0) {
					$("[dataparent='" + ht + "']").hide();
					$("[dataparent^='" + ht + "']").hide();
					$(this).children().eq(0).children('i').css({
						'background-image': "url(img/leftJia.png)"
					});
					$("[dataparent^='" + ht + "']").children().eq(0).children('i').css({
						'background-image': "url(img/leftJia.png)"
					});
					$("[dataparent^='" + ht + "']").attr('id', parseInt(h) + 1);
				}
			})
		})
	</script>
</html>
